import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
  state = {
    todo: '',
    list: [{ id: 1, val: 'test' }]
  }
  change = (e) => {
    this.setState({
      todo: e.target.value
    })
  }
  submit = (e) => {
    if (e.keyCode == 13) {
      // this.state.list.push({ id: Math.random(), val: this.state.todo })
      this.setState({
        list: this.state.list.concat({ id: Math.random(), val: this.state.todo }),
        todo: ''
      })
    }
  }
  del(item) {
    console.log(item);
    this.setState({
      list: this.state.list.filter(v => v.id !== item.id)
    })
  }
  render() {
    let { todo, list } = this.state;
    return <div className=''>
      <input type="text" value={todo} onChange={this.change} onKeyDown={this.submit} />
      <ul>
        {
          list.map(item => <li key={item.id}>{item.val} <button onClick={() => this.del(item)}>X</button></li>)
        }
      </ul>
    </div>;
  }
}

ReactDOM.render(<App />, document.getElementById('root'))